<template>
    <view class="page" :style="{ '--color': color }">
        <status-bar title="团队成员"></status-bar>
        <view class="Info" v-if="myInfo">
            <view class="userBox">
                <image :src="$imgUrls(myInfo.headimg)" mode="aspectFill" class="userImg"></image>
                <view class="Lvs">{{ myInfo.upLevelInfo.thisLevelTitle }}</view>
            </view>
            <view class="flex-1 white">
                <view class="size30">{{ myInfo.name }}</view>
                <view class="size30 m-top10">{{ myInfo.tel }}</view>
            </view>
        </view>

        <view class="LvBox" v-if="myInfo">
            <text class="size30 color_33">团队等级</text>
            <view class="LvWrapper">
                <text class="size28">{{ myInfo.upLevelInfo.thisLevelTitle }}</text>
                <view class="content">
                    <text class="Txt">{{ myInfo.upLevelInfo.text }}</text>
                    <view class="line">
                        <u-line-progress :percentage="myInfo.upLevelInfo.proportion" height="9" activeColor="#ffcc00"></u-line-progress>
                    </view>
                </view>
                <text class="size32 color_33">{{ myInfo.upLevelInfo.nextLevelTitle }}</text>
            </view>
        </view>

        <view class="Team">
            <view class="titleBox">
                <scroll-view scroll-x="true" class="flex-1 nowrap" :scroll-into-view="scrollintoview">
                    <view class="list" :id="`list${index}`" :class="{ active: item.id == id }" v-for="(item, index) in columns" :key="index" @click="confirm(item, index)">
                        {{ item.title }}({{ item.num }})
                    </view>
                </scroll-view>
                <view class="screen">
                    <view class="iconfont icon-qiandao black size36" @click="showScreen = true"></view>
                </view>
            </view>

            <!-- 类型排序 -->
            <view class="Typeordering">
                <view class="lists" @click="timeType(1)">
                    <text class="Txt">注册时间</text>
                    <view class="ordring">
                        <view class="iconfont icon-paixu-shang" :class="{ active: sortType == 2 }"></view>
                        <view class="iconfont icon-paixu-xia" :class="{ active: sortType == 1 }"></view>
                    </view>
                </view>
                <view class="lists" @click="timeType(2)">
                    <text class="Txt">复购单量</text>
                    <view class="ordring">
                        <view class="iconfont icon-paixu-shang" :class="{ active: sortType == 5 }"></view>
                        <view class="iconfont icon-paixu-xia" :class="{ active: sortType == 3 }"></view>
                    </view>
                </view>
                <view class="lists" @click="timeType(3)">
                    <text class="Txt">团队业绩</text>
                    <view class="ordring">
                        <view class="iconfont icon-paixu-shang" :class="{ active: sortType == 6 }"></view>
                        <view class="iconfont icon-paixu-xia" :class="{ active: sortType == 4 }"></view>
                    </view>
                </view>
            </view>

            <view class="list" v-for="(item, index) in pageData" :key="index" @click="toFans(item)">
                <view class="Infos">
                    <view class="userBox">
                        <image :src="$imgUrls(item.headimg)" mode="aspectFill" class="userImg"></image>
                        <view class="Lvs" v-if="item.team_name">{{ item.team_name }}</view>
                    </view>
                    <view class="flex-1 d-flex f-column">
                        <text class="ellipsis black size26">{{ item.name }}</text>
                        <text class="color_33 h6 m-top6">{{ item.tel }}</text>
                        <text class="color_33 h6 m-top6">{{ item.add_date }}</text>
                    </view>
                </view>
                <view class="perfTxtBox">
                    <view class="perfTxt">自购:{{ item.my_order_num }}</view>
                    <view class="perfTxt">业绩:{{ item.my_order_money }}</view>
                    <view class="perfTxt">团队:{{ item.teamInfo.teamUserNum }}人</view>
                    <view class="perfTxt">复购:{{ item.repurchase_order_num }}</view>
                </view>
            </view>

            <view class="p-top100 p-bot100" v-if="!pageData.length">
                <u-empty mode="list" text="暂无相关内容"></u-empty>
            </view>
        </view>
        <!-- 
		<u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker> -->

        <u-popup :show="showScreen" @close="showScreen = false" :round="10">
            <view class="ScreentBox">
                <!-- <view class="list">
					<text class="title">类型排序：</text>
					<view class="lisBox">
						<view class="lis" @click.stop="sortType = item.sortType" :class="{ active: item.sortType == sortType }" v-for="(item, index) in sortTypeData" :key="index">
							{{ item.name }}
						</view>
					</view>
				</view> -->
                <view class="list">
                    <text class="title">时间范围：</text>
                    <view class="listTime">
                        <view class="TimetXT" @click.stop="open">{{ startTime ? startTime : '开始时间' }}</view>
                        <view class="Line">——</view>
                        <view class="TimetXT" @click.stop="open">{{ endTime ? endTime : '结束时间' }}</view>
                    </view>
                </view>

                <view class="row j-se m-top30">
                    <view class="ConfigBtn figBtns" @click="ScrolBtn">确定</view>
                    <view class="resetBtn figBtns" @click="resetBtn">重置</view>
                </view>
            </view>
        </u-popup>

        <uni-calendar :insert="false" range :start-date="'2025-1-1'" :end-date="maxDate" @confirm="confirmCale" ref="calendar" />
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                myInfo: '',
                pageData: [],
                cycle: [],
                page: 1,
                limit: 10,
                getMore: true,
                id: 'mySelf',
                name: '全部',
                count: 0,
                show: false,
                columns: [],
                scrollintoview: '',
                showScreen: false,
                showCalendar: false,
                sortTypeData: [
                    {
                        name: '时间顺序',
                        sortType: 1
                    },
                    {
                        name: '时间倒序',
                        sortType: 2
                    },
                    {
                        name: '复购',
                        sortType: 3
                    },
                    {
                        name: '业绩',
                        sortType: 4
                    }
                ],
                sortType: 2,
                startTime: '',
                endTime: '',
                mode: 'range',
                maxDate: ''
            };
        },
        computed: {
            ...mapState(['color'])
        },
        onLoad() {
            this.getConfig();
            this.getTeamUserList();
            this.setDateRange();
        },
        // onReady() {
        // 	this.$refs.calendar.setFormatter(this.formatter);
        // },
        methods: {
            open() {
                this.$refs.calendar.open();
                this.showScreen = false;
            },
            async getConfig() {
                const result = await Api.getConfig();
                this.myInfo = result;
            },

            getTeamUserList() {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/privateTeamApi/getTeamUserList',
                        data: {
                            page: this.page,
                            limit: this.limit,
                            id: this.id,
                            sortType: this.sortType,
                            startTime: this.startTime,
                            endTime: this.endTime
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const reuslt = res.data || [];
                        const levelNum = res.levelNum || [];
                        if (this.columns) this.columns = levelNum;

                        this.pageData = this.page == 1 ? reuslt : this.pageData.concat(reuslt);
                        if (reuslt.length < this.limit) this.getMore = false;
                        this.cycle = res.cycle || [];
                    });
            },

            timeType(num) {
                if (num == 1) this.sortType == 1 ? (this.sortType = 2) : (this.sortType = 1);
                if (num == 2) this.sortType == 5 ? (this.sortType = 3) : (this.sortType = 5);
                if (num == 3) this.sortType == 6 ? (this.sortType = 4) : (this.sortType = 6);

                this.ScrolBtn();
            },
            getLevelList() {
                this.$http
                    .post({
                        url: '/privateTeamApi/getLevelList'
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.data || [];
                        let count = 0;

                        this.columns = result;
                        if (result.length) this.id = result[0].id;

                        this.getTeamUserList();
                    });
            },
            confirm(item, index) {
                this.id = item.id;
                this.page = 1;
                this.getMore = true;
                if (index >= 1) {
                    this.scrollintoview = `list${index - 1}`;
                } else {
                    this.scrollintoview = `list${index}`;
                }

                this.getTeamUserList();
            },
            toFans(item) {
                this.toUrl(`/moneyPage/distributors/myFans?vid2=${item.v_id}`);
            },
            setDateRange() {
                const d = new Date();
                const year = d.getFullYear();
                let month = d.getMonth() + 1;
                const date = d.getDate();
                let minyear = year - 1;
                this.maxDate = `${year}-${month}-${date}`;
            },
            confirmCale(e) {
                console.log(e);
                e.range.after ? (this.endTime = e.range.after) : (this.endTime = '');
                e.range.before ? (this.startTime = e.range.before) : (this.startTime = '');
                if (e.range.before && !e.range.after) this.endTime = e.range.before;
                this.showScreen = true;
            },
            ScrolBtn() {
                this.page = 1;
                this.getMore = true;
                this.$pop.pageScrollTo();
                this.showScreen = false;
                this.getTeamUserList();
            },
            resetBtn() {
                this.startTime = '';
                this.endTime = '';
                this.ScrolBtn();
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.getTeamUserList();
        }
    };
</script>

<style lang="scss" scoped>
    :deep .uni-calendar-item--after-checked {
        background-color: var(--color);
    }
    :deep .uni-calendar-item--before-checked {
        background-color: var(--color);
    }
    .ScreentBox {
        width: 100%;
        padding: 50rpx 30rpx;
        display: flex;
        flex-direction: column;
        .list {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-bottom: 50rpx;
            .title {
                color: #000;
                font-size: 32rpx;
            }
            .lisBox {
                width: 100%;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                .lis {
                    height: 70rpx;
                    padding: 0 24rpx;
                    border: 1px solid #999;
                    border-radius: 10rpx;
                    color: #999;
                    font-size: 28rpx;
                    margin-right: 20rpx;
                    margin-top: 24rpx;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                }
                .active {
                    color: #fff;
                    background-color: var(--color);
                    border-radius: 1px solid var(--color) !important;
                    border-radius: 10rpx !important;
                }
            }
            .listTime {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 24rpx;
                .Line {
                    height: 70rpx;
                    height: 1px;
                    color: #999;
                    font-size: 28rpx;
                    display: flex;
                    align-items: center;
                    margin: 0 20rpx;
                }
                .TimetXT {
                    width: 240rpx;
                    height: 70rpx;
                    color: #999;
                    font-size: 28rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid #999;
                    border-radius: 10rpx;
                }
            }
        }
        .figBtns {
            width: 240rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10rpx;
            color: #fff;
            background-color: var(--color);
            font-size: 30rpx;
        }
        .ConfigBtn {
            color: #fff;
            background-color: var(--color);
        }
        .resetBtn {
            color: #999;
            background-color: #f1f1f1;
        }
    }
    .page {
        background-color: #f2f2f2;
        padding-bottom: 24rpx;
    }

    .Info {
        background-color: var(--color);
        padding: 40rpx 24rpx;
        display: flex;
        align-items: center;
    }

    .userBox {
        width: 150rpx;
        height: 120rpx;
        display: flex;
        justify-content: center;
        position: relative;

        .userImg {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
        }

        .Lvs {
            max-width: 100%;
            background-color: #ff9900;
            color: #fff;
            font-size: 22rpx;
            padding: 2rpx 10rpx;
            border-radius: 4rpx;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
        }
    }

    .LvBox {
        width: 690rpx;
        padding: 20rpx;
        background-color: #fff;
        margin: 24rpx auto 0;
        border-radius: 10rpx;

        .LvWrapper {
            display: flex;
            align-items: center;
            margin-top: 20rpx;

            .content {
                flex: 1;
                margin: 0 20rpx;
                display: flex;
                flex-direction: column;
                align-items: center;

                .Txt {
                    color: #b7655a;
                    font-size: 26rpx;
                }

                .line {
                    width: 100%;
                    margin-top: 10rpx;
                }
            }
        }
    }

    .Team {
        width: 690rpx;
        margin: 30rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        .Typeordering {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .lists {
                display: flex;
                align-items: center;
                padding: 10rpx;
                .Txt {
                    color: #333;
                    font-size: 28rpx;
                }
                .ordring {
                    display: flex;
                    flex-direction: column;

                    padding-left: 10rpx;
                    .iconfont {
                        font-size: 20rpx;
                        padding: 0;
                        color: #ccc;
                        transform: scale(0.7);
                        transform-origin: top left;
                    }
                    .icon-paixu-shang {
                        margin-top: 10rpx;
                    }
                    .icon-paixu-xia {
                        margin-top: -4rpx;
                    }
                    .active {
                        color: #000;
                    }
                }
            }
        }
        .titleBox {
            width: 100%;
            padding: 20rpx 0 0 0;
            display: flex;
            align-items: center;
            .list {
                padding: 8rpx 22rpx;
                border: 1px solid #f2f2f2;
                border-radius: 8rpx;
                font-size: 26rpx;
                color: #999;
                margin-left: 16rpx;

                display: inline-block;
            }
            .list:last-child {
                margin-right: 0;
            }

            .active {
                background-color: var(--color);

                color: #fff;
            }
            .select {
                display: flex;
                align-items: center;
            }
            .screen {
                color: #000;
                font-size: 26rpx;
                padding: 20rpx 30rpx;
            }
        }

        .list {
            padding: 20rpx;
            border-bottom: 1px solid #f2f2f2;
            display: flex;
            align-items: center;

            .Infos {
                flex: 1;
                display: flex;
            }
            .perfTxtBox {
                width: 180rpx;
                .perfTxt {
                    color: #333;
                    font-size: 24rpx;
                    margin-top: 6rpx;
                }
            }
        }
    }

    .swiper {
        height: 160rpx;
    }
</style>
